<template>
  <div class="detail">
    
    <v-head :bannerImg="bannerImg" @handleClick="handleClick"></v-head>
    <div >
      <detail-nav v-if="isNav" :style="opacitys"></detail-nav>
      <router-link v-else to="/" tag="i" class="iconfont bg" >&#xe6bc;</router-link>
    </div>
    <v-fade>
      <detail-gallary slot="fade" v-show="isGallay" @toggle="hide" :swiperList="data.gallaryImgs">
      </detail-gallary>
    </v-fade>

    <detail-list :categoryList="categoryList"></detail-list>
  </div>
</template>

<script>
import { DetailModel } from "../../models/DetailModel";
const detailmodel = new DetailModel();
import VHead from './components/Header'
import DetailGallary from "./components/Gallary";
import DetailNav from "./components/Nabar";
import DetailList from "./components/DetailList";
import VFade from "./components/Fade";
export default {
  name: "detail",
  components: {
    VHead,
    DetailGallary,
    DetailNav,
    DetailList,
    VFade
  },

  data() {
    return {
      data: "",
      bannerImg: "",
      categoryList:"",
      isGallay: false,
      isNav: false,
      opacitys: {
        opacity: 0
      }
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    var id = this.$route.params.id;
    detailmodel.getDetail(id).then(res => {
      console.log(res);
      let data = res.data.data;
      console.log(data);
      this.bannerImg = data.bannerImg;
      this.data = data;
      this.categoryList = data.categoryList
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      var top = document.documentElement.scrollTop || document.body.scrollTop;
      if (top > 0) {
        this.isNav = true;
        var opacity = top / 200;
        if (opacity > 1) {
          opacity = 1;
        }
        this.opacitys.opacity = opacity;
      } else {
        this.isNav = false;
      }
    },
    handleClick() {
      this.isGallay = true;
    },
    hide() {
      this.isGallay = false;
    }
  }
};
</script>
<style lang="scss" scoped>
@import '~@/assets/style/global.scss';

.v-header{
  border: 1px solid #333
}

.detail {
  height: 2000px;
}
.bg {
  position: absolute;
  line-height: 80px;
  top: 0px;
  left: 30px;
  font-size: 50px;
  
  color: color(nav-head);  
}
</style>
